// 此处完成购物车逻辑代码
// console.log(list);
//获取你要渲染的容器
let content = document.querySelector('.content');

renderHtml();
//因为很多操作都要重新渲染 所以最好把渲染这个操作封装成一个函数
function renderHtml() {
  //需要根据list数组计算一些东西
  //总价，总数，已选数量
  let totalPrice = 0;
  let totalNum = 0;
  let selectNum = 0;
  list.forEach((ele) => {
    if (ele.select === true) {
      selectNum++;
      totalNum += ele.buy_num;
      totalPrice += ele.price * ele.buy_num;
    }
  });
  let str = `
  <div class="top">
      <input type="checkbox" class="select_all"
      ${selectNum >= list.length ? 'checked' : ''}
      > 全选
    </div>
    <ul class="center">
  `;
  //根据数组生成对应的li
  list.forEach((ele) => {
    str += `
  <li>
      <div class="select">
        <input data-id="${ele.id}" type="checkbox"
        class="select_one"
        ${ele.select ? 'checked' : ''}>
      </div>
      <div class="pic">
        <img src="${ele.pic}" alt="">
      </div>
      <div class="name">
        ${ele.name}
      </div>
      <div class="price">
        ￥ <span>${(ele.price - 0).toFixed(2)}</span>
      </div>
      <div class="number">
        <button  data-id="${ele.id}" class="sub">-</button>
        <input type="text"  value="${ele.buy_num}" readonly>
        <button  data-id="${ele.id}" class="add">+</button>
      </div>
      <div class="subtotal">
        ￥ <span>${(ele.price * ele.buy_num).toFixed(2)}</span>
      </div>
      <div class="del">
        <button data-id="${ele.id}" class="del_one">删除</button>
      </div>
  </li>
    `;
  });
  str += `
  </ul>
    <div class="bottom">
      <p>总购买数量: ${totalNum}</p>
      <p>
        <button class="pay" data-price="${totalPrice}">去结算</button>
        <button class="clear">清空购物车</button>
        <button class="clear_select">删除所有已选中</button>
        <button class="list">返回列表页</button>
      </p>
      <p>总价格 : ￥ <span>${totalPrice.toFixed(2)}</span></p>
    </div>
  `;
  content.innerHTML = str;
}
//绑定事件
content.addEventListener('click', function (e) {
  let target = e.target;
  //通过target判断点击的是哪里
  //全选
  if (target.className === 'select_all') {
    //拿到自己的状态 并赋值给下面所有的单选
    let type = target.checked;
    list.forEach((ele) => {
      ele.select = type;
    });
    renderHtml();
  }
  //如何知道我点的是那个一个？
  //单选
  if (target.className === 'select_one') {
    //修改数组中对应的某一条数据
    //要先找到对应的那条
    // console.log(target.dataset);
    let id = target.dataset.id - 0;
    let good = list.find((ele) => ele.id === id);
    //点击后取反选中
    good.select = !good.select;
    renderHtml();
  }
  //减少
  if (target.className === 'sub') {
    let id = target.dataset.id - 0;
    let good = list.find((ele) => ele.id === id);
    //最少减到1
    if (good.buy_num <= 1) return;
    good.buy_num--;
    renderHtml();
  }
  //增加
  if (target.className === 'add') {
    let id = target.dataset.id - 0;
    let good = list.find((ele) => ele.id === id);
    //不能超过库存
    if (good.buy_num >= good.number) return;
    good.buy_num++;
    //渲染一下
    renderHtml();
  }
  //删除一个
  if (target.className === 'del_one') {
    let id = target.dataset.id - 0;
    //在数组里面把对应id的移除
    list = list.filter((ele) => ele.id !== id);
    //渲染一下
    renderHtml();
  }
  //去结算
  if (target.className === 'pay') {
    //拿到对应的总价
    let price = target.dataset.price - 0;
    console.log(price);
    //优惠卷 折扣 会员价 积分抵扣 砍一刀....
    //后续该干嘛干嘛
  }
  //清空购物车
  if (target.className === 'clear') {
    list = [];
    renderHtml();
  }
  //删除已选中
  if (target.className === 'clear_select') {
    //把list中select为true的全部过滤掉
    list = list.filter((ele) => ele.select === false);
    renderHtml();
  }
});
